<script setup>
import Footer from "@/components/Footer.vue";
import router from "@/router";
import { onMounted } from "vue";
import { ref } from "vue";
import { hospitalInfoService } from "@/api/hospital";
import Echarts from "@/views/Echarts.vue";
import { useRoute } from "vue-router";
const hospital=ref([]);
const showRank=ref(false);
const route = useRoute();
onMounted(async () => {
  await getHospitalInfo();
});
function clickRank(){
  showRank.value=true;
}
const getHospitalInfo = async () => {
  let result = await hospitalInfoService();
  //console.log(result)
  if (result.code == 200) {
    hospital.value = result.data;
  }
};

function toSetmeal(index) {
  console.log(index)
  if(route.query.familyid !== null || route.query.familyid !== undefined){
    router.push({
      path:'/setmeal',
      query:{
        hpId:hospital.value[index].hpId,
        familyid:route.query.familyid
      }
    });
  }
  else{
    router.push({
      path:'/setmeal',
      query:{
        hpId:hospital.value[index].hpId
      }
    });
  }
 
}
function toLocation(index){
  //console.log(hospital.value[index].address)
  window.location.href =`https://ditu.amap.com/search?${encodeURIComponent(hospital.value[index].address)}`
}
const copyTel = async (index) => {
  //console.log(hospital.value[index].telephone)
  const text = hospital.value[index].telephone

  let clipboard = new Clipboard('.buttoncopy', {
    text: () => text
  })

  clipboard.on('success', (e) => {
    alert('已成功复制到剪贴板,请打开浏览器，在地址栏粘贴访问')
    e.clearSelection() // 清除选中状态
  })

  clipboard.on('error', function (e) {
    text.value = window.location.href
    alert('无法复制到剪贴板,请长按下边链接手动复制')
  })
}

</script>
<template>

  <!-- 总容器 -->
  <div class="wrapper">

    <header>
      
      <i class="fa fa-angle-left" onclick="history.go(-1)"></i>
      <el-button @click="clickRank">
        排行榜
      </el-button>
      <el-dialog v-model="showRank" style="width: 360px;height:1000px">
        <Echarts></Echarts>
      </el-dialog>
      <p>请您选择体检机构</p>
      <div></div>
      <div></div>
      <div></div><div></div><div></div>
    </header>
    <div class="top-ban"></div>

    <ul class="hospital" v-loading="hospital.length === 0">
      <el-empty v-show="hospital.length === 0"/>
      <li v-for="(item, index) in hospital" :key="index">
        <h3 @click="toSetmeal(index)">
          {{item.name}}
          <i class="fa fa-angle-right"></i>
        </h3>
        <div class="hospita-info" >
          <img :src="item.picture" />
          <table>
            <tr>
              <td>营业时间</td>
              <td>{{item.businessHours}}</td>
            </tr>
            <tr>
              <td>采血截止</td>
              <td>{{item.deadline}}</td>
            </tr>
            <tr>
              <td>电话</td>
              <td>{{item.telephone}}</td>
            </tr>
            <tr>
              <td>地址</td>
              <td>{{item.address}}</td>
            </tr>
          </table>
        </div>
        <div class="about">
          <p @click="copyTel(index)" class="buttoncopy">
            <i class="fa fa-phone" ></i>
            联系我们
          </p>
          <p>
            <i class="fa fa-map-marker" @click="toLocation(index)"></i>
            查找位置
          </p>
        </div>
      </li>
      <!--<li>
        <h3 @click="toSetmeal">
          沈阳熙康云医院-浑南院区
          <i class="fa fa-angle-right"></i>
        </h3>
        <div class="hospita-info">
          <img src="../assets/img/hospita2.png" />
          <table>
            <tr>
              <td>营业时间</td>
              <td>周一至周六 7:30-11:30</td>
            </tr>
            <tr>
              <td>采血截止</td>
              <td>10:30</td>
            </tr>
            <tr>
              <td>电话</td>
              <td>52713658</td>
            </tr>
            <tr>
              <td>地址</td>
              <td>创新路175号（与智慧大厦交汇处）</td>
            </tr>
          </table>
        </div>
        <div class="about">
          <p>
            <i class="fa fa-phone"></i>
            联系我们
          </p>
          <p>
            <i class="fa fa-map-marker"></i>
            查找位置
          </p>
        </div>
      </li>-->
    </ul>

    <div class="bottom-ban"></div>
    <Footer> </Footer>
  </div>
</template>

<style scoped>
@import "@/assets/css/hospital.css";
@import "@/assets/framework/reset.css";
@import "@/assets/framework/font-awesome/css/font-awesome.min.css";
</style>
